<include file="public/header" />
<body>
<style>

    .imgs{
        width: 150px;height: 80px;
    }

</style>
<div class="layui-fluid">
    <div class="layui-row">
        <form class="layui-form">
            <div class="layui-form-item">
                <label for="title" class="layui-form-label">
                    <a href="">横幅</a>
                    <a>
                        <cite>列表</cite></a>
                </label>
                <div class="layui-input-inline">
                    <input type="text" id="name" name="title" value="{$info.title}" required="" lay-verify="required"
                           autocomplete="off" class="layui-input">
                </div>

                <!--                <div class="layui-form-mid layui-word-aux">-->
                <!--                    <span class="x-red">*</span>将会成为您唯一的登入名-->
                <!--                </div>-->
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">类型<span style="color: red;">(必填)</span></label>
                <div class="layui-input-block">
                    <input type="radio" name="type" value="1" title="图片" lay-filter="type"  <if condition="$info.type eq 1 or $info.type eq ''">checked=""</if> >
                    <input type="radio" name="type" value="2" title="视频" lay-filter="type" <if condition="$info.type eq 2">checked=""</if>>
                </div>
            </div>
            <div class="layui-form-item" id="images" style="display: <if condition='$info.type eq 2'>none</if>">
                <div class="layui-inline" >
                    <label class="layui-form-label">图片</label>
                    <div class="layui-input-inline"	style="width: 200px;">

                        <div class="layui-upload">
                            <button type="button" class="layui-btn" id="test1">上传图片</button>
                            <div class="layui-upload-list">
                                <img class="layui-upload-img imgs" src="{$info.thumb}"  id="demo1">
                                <p id="demoText"></p>
                            </div>
                            <!--                            <div style="width: 95px;">-->
                            <!--                                <div class="layui-progress layui-progress-big" lay-showpercent="yes" lay-filter="demo">-->
                            <!--                                    <div class="layui-progress-bar" lay-percent=""></div>-->
                            <!--                                </div>-->
                            <!--                            </div>-->
                        </div>
                        <input type="hidden" id="thumb" name="thumb" value="">

                        <!--                        <a name="list-progress"> </a>-->
                    </div>
                </div>
            </div>
            <div class="layui-form-item" id="videos" style="display: <if condition='$info.type eq 1'>none</if>">
                <div class="layui-inline" >
                    <label class="layui-form-label">视频</label>
                    <div class="layui-input-inline"	style="width: 200px;">
                        <button type="button" class="layui-btn" id="test5"><i class="layui-icon"></i>上传视频</button>
                            <div class="layui-upload-list">
                            <video id="video" src="{$info.thumb}" width="320" height="240" controls="controls">
                            </video>
                            </div>
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">路由<span style="color: red;">(必填)</span></label>
                <div class="layui-input-block">
                    <input type="text" name="path"  lay-verify="required"  value="{$info.path}"  autocomplete="off" placeholder="" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">排序<span style="color: red;">(必填)</span></label>
                <div class="layui-input-block">
                    <input type="number" name="sort"  lay-verify="required"  value="{$info.sort}" style="width: 50px !important;" autocomplete="off" placeholder="" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">显示</label>
                <div class="layui-input-block">
                    <input type="radio" name="status" value="1" title="是" <if condition="$info.status eq 1 or $info.status eq ''">checked=""</if> >
                    <input type="radio" name="status" value="2" title="否" <if condition="$info.status eq 2">checked=""</if>>
                </div>
            </div>
            <div class="layui-form-item" >
                <div class="layui-input-block">
                    <input hidden name="bucket" value="platform">
                    <input hidden name="types" value="{$types}">
                    <input type="hidden"  name="id" value="{$info.id}">
                    <button type="button"  class="layui-btn" lay-submit=""  lay-filter="addEdit">保存</button>
                </div>
            </div>
        </form>
    </div>
</div>
<script>

    layui.use(['form', 'layedit', 'laydate','jquery','upload'], function(){
        var form = layui.form
            ,layer = layui.layer
            , $ = layui.jquery
            , upload = layui.upload
            ,laydate = layui.laydate
            ,inputTags = layui.inputTags
        var layedit = layui.layedit;
        //拖拽上传
        //常规使用 - 普通图片上传
        var uploadInst = upload.render({
            elem: '#test1',
            field:'file'
            ,data:{bucket:'platform',type:'image'}
            ,url: "{:url('Upload/ajaxUploadFile')}" //此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    $('#demo1').addClass('imgs');
                    $('#demo1').attr('src', result); //图片链接（base64）

                });

                //  element.progress('demo', '0%'); //进度条复位
                //    layer.msg('上传中', {icon: 16, time: 0});
            }
            ,done: function(res){
                //如果上传失败

                console.log(res);

                if(res.code >200){
                    return layer.msg('上传失败');
                }
                //上传成功的一些操作
                //……
                $('#thumb').val(res.data.path);
                $('#demoText').html(''); //置空上传失败的状态
            }
            ,error: function(){
                //演示失败状态，并实现重传
                var demoText = $('#demoText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function(){
                    uploadInst.upload();
                });
            }
            //进度条
            ,progress: function(n, elem, e){
                element.progress('demo', n + '%'); //可配合 layui 进度条元素使用
                if(n == 100){
                    layer.msg('上传完毕', {icon: 1});
                }
            }
        });

        upload.render({
            elem: '#test5',
            field:'file'
            ,data:{bucket:'platform',type:'videos'}
            ,url: "{:url('/api.php/Upload/endbackUploads')}"
            ,accept: 'video' //视频
            ,done: function(res){
                if(res.code == 200){
                    $('#video').attr('src', res.url+res.path); //图片链接（base64）
                    $('#thumb').val(res.path);
                }

            }
        });

        form.on('radio(type)', function(data){
            if(data.value==1){
                $('#videos').hide();
                $('#images').show();
            }else {
                $('#videos').show();
                $('#images').hide();
            }
        });

        form.on('submit(addEdit)', function(data){
            $.post($('form').attr('action'),data.field,function(data){
                if(data.code == 200){
                    layer.msg(data.msg);
                    setTimeout(function () {
                        window.location.href =data.url
                    },2000)
                    xadmin.close();
                    xadmin.father_reload();
                }else {
                    layer.msg(data.msg);
                }
            });
            return false;
        });
    });

</script>
</body>

</html>
